import React from "react";
import PropTypes from "prop-types";
import ProgressView from "./ProgressView";
import PressTouch from "./PressTouch";
import Config from "../Config";

export class Dialog extends React.Component {
    static propTypes = {
        style: PropTypes.object,
        onClick: PropTypes.func
    };

    constructor(props) {
        super(props);
        this.state = {
            visibility: false,
        };
    }

    render() {
        let style = this.props.style;
        let visibility = this.state.visibility ? "block" : "none";
        let onClick = this.props.onClick;

        return (
            <div
                style={{
                    width: "100%",
                    height: "100vh",
                    position: "fixed",
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    display: visibility,
                    zIndex: 99,
                    backgroundSize: "cover",
                    ...style
                }}
                onClick={onClick}
            >
                <div
                    style={{
                        width: "100%",
                        height: "100%",
                        backgroundColor: "rgba(0,0,0,0.6)",
                        flexDirection: "column",
                        justifyContent: "center",
                        alignItems: "center",
                        display: "flex"
                    }}
                >
                    {this.renderContent ? this.renderContent() : this.props.children}
                </div>
            </div>
        );
    }
}

export class ProgressDialog extends Dialog {
    static propsTypes = {
        visibility: PropTypes.bool.isRequired,
        msg: PropTypes.string
    };

    renderContent() {
        const {visibility, msg} = this.props;

        return (
            <div
                style={{
                    backgroundColor: "white",
                    borderRadius: "5px",
                    width: "80%",
                    margin: "auto",
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center"
                }}
            >
                <ProgressView visibility={visibility}/>
                <p>{msg ? msg : "正在加载..."}</p>
            </div>
        );
    }
}

export class HintDialog extends Dialog {
    static propTypes = {
        operateText: PropTypes.string,
        operateClick: PropTypes.func
    };

    constructor(props) {
        super(props);
        this.state = {
            content: ''
        }
    }
    renderContent() {
        const {operateText, operateClick} = this.props;
        const {content} = this.state;
        return (
            <div
                style={{
                    backgroundColor: "white",
                    borderRadius: "5px",
                    width: "80%",
                    margin: "auto",
                    color: "#fff",
                    position: "relative"
                }}
            >
                <span className="close"
                      style={{position: 'absolute', right: '10px', top: '5px'}}
                      onClick={()=>{
                          this.setState({
                              visibility: false
                          })
                      }}
                >X</span>
                <div
                    style={{
                        backgroundColor: Config.BaseColor,
                        padding: "1.5rem",
                        borderTopLeftRadius: "5px",
                        borderTopRightRadius: "5px"
                    }}
                >
                    <p>{content}</p>
                </div>
                <PressTouch
                    style={{
                        borderRadius: 20,
                        backgroundColor: Config.BaseColor,
                        padding: 5,
                        minWidth: "5rem",
                        maxWidth: "7rem",
                        margin: "auto",
                        marginTop: "1rem",
                        marginBottom: "1rem"
                    }}
                    onClick={() => {
                        this.setState({
                            visibility: false
                        });
                        if (operateClick) {
                            operateClick()
                        }
                    }}
                >
                    <p style={{textAlign: "center"}}>
                        {operateText ? operateText : "知道了"}
                    </p>
                </PressTouch>
            </div>
        );
    }
}
